<template>
    
    <el-form ref="formRef" class="pl-3" :model="formData" label-width="80px" inline>
        
        <el-card class="!border-none flex flex-1 items-center justify-center" shadow="never">
            <div class=" w-[800px]">
                <div class=" text-lg	 mb-4">
                    公司信息
                </div>
                
                <div class="pl-3 grid grid-cols-2 gap-0">
                    <div>
                        <el-form-item label="公司名称" prop="corporationId"
                                      :rules="[{required: true, message:'公司名称不可为空',trigger:'change'}]">
                            
                            <el-select class="w-56" v-model="formData.corporationId">
                                <el-option v-for="item in corporationList"
                                           :label="item.companyName"
                                           :value="item.id"/>
                            </el-select>
                        </el-form-item>
                    </div>
                    
                    
                    <el-form-item label="公司简称">
                        <el-input class="w-56" v-model="formData.companyAs" placeholder="请输入公司简称"
                                  clearable/>
                    </el-form-item>
                    
                    
                    <el-form-item label="行业">
                        <el-input class="w-56" v-model="formData.profession" placeholder="请输入行业"
                                  clearable/>
                    </el-form-item>
                    
                    <el-form-item label="部门">
                        <el-input class="w-56" v-model="formData.department" placeholder="请输入用户部门"
                                  clearable/>
                    </el-form-item>
                    
                    <el-form-item label="职位">
                        <el-input class="w-56" v-model="formData.position" placeholder="请输入用户职位"
                                  clearable/>
                    </el-form-item>
                
                </div>
            </div>
        </el-card>
        
        
        <el-card class="!border-none flex flex-1 items-center justify-center mt-2" shadow="never">
            <div class=" w-[800px]">
                <div class=" text-lg	 mb-4">个人信息</div>
                <div class="pl-3  grid grid-cols-2 gap-0">
                    <div>
                        <el-form-item label="姓名" prop="name"
                                      :rules="[{required: true, message:'用户姓名不可为空',trigger:'change'}]">
                            <el-input class="w-56" v-model="formData.name" placeholder="请输入客户姓名 "
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="电话" prop="phone">
                            <el-input class="w-56" v-model.number="formData.phone" placeholder="请输入客户 电话"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="兴趣爱好" prop="hobbies">
                            <el-input class="w-56" v-model.number="formData.hobbies" placeholder="请输入客户兴趣爱好"
                                      clearable/>
                        </el-form-item>
                    </div>
                    
                    <div>
                        <el-form-item label="子女情况" prop="childrenSituation">
                            <el-select class="w-56" v-model="formData.childrenSituation" placeholder="请选择是否礼物">
                                
                                <el-option v-for="(item) in childrenSituationList"
                                           :label="item"
                                           :value="item"/>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            
            </div>
        </el-card>
        
        
        <el-card class="!border-none flex flex-1 items-center justify-center mt-2" shadow="never">
            <div class=" w-[800px]">
                <div class=" text-lg	 mb-4">交互情况</div>
                <div class="pl-3  grid grid-cols-2 gap-0">
                    <div>
                        <el-form-item label="关注点" prop="concerns">
                            <el-input class="w-56" v-model.trim="formData.concerns" placeholder="请输入用户关注点"
                                      clearable/>
                        </el-form-item>
                    </div>
                    
                    <div>
                        <el-form-item label="是否交涉" prop="isGif" placeholder="请选择是否礼物">
                            <el-select v-model="formData.isGif" placeholder="请选择是否礼物">
                                <el-option v-for="item in isGifList"
                                           :key="item.value"
                                           :label="item.name"
                                           :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="中间人" prop="intermediary">
                            <el-input class="w-56" v-model.trim="formData.intermediary" placeholder="请输入中间人"
                                      clearable/>
                        </el-form-item>
                    </div>
                
                </div>
            </div>
        </el-card>
        
        
        <el-card class="!border-none flex flex-1 items-center justify-center mt-2" shadow="never">
            <div class=" w-[800px]">
                <div class=" text-lg	 mb-4">地址信息</div>
                
                <div class="pl-3  grid grid-cols-2 gap-0">
                    <div>
                        <el-form-item label="省市区" prop="address"
                                      :rules="[{required: true, message:'省市区不可为空',trigger:'change'}]">
                            
                            <el-cascader
                                class="w-56"
                                placeholder="请选择省市区"
                                :options="afterSaleOrderConfig.addressTree"
                                v-model="formData.address"
                                :props="{
                                  value: 'name',
                                  label: 'name',
                                  children: 'children',
                                  expandTrigger: 'hover' }"
                                @change="handleAddressChange"
                            />
                        </el-form-item>
                    
                    </div>
                    
                    <div>
                        <el-form-item label="详细地址" prop="userAddress">
                            <el-input class="w-56" v-model="formData.userAddress"
                                      placeholder="请输入详细地址"
                                      clearable/>
                        </el-form-item>
                    </div>
                
                </div>
            
            </div>
        </el-card>
        
        
        <!--        备注信息-->
        <el-card class="!border-none flex flex-1 items-center justify-center mt-2" shadow="never">
            <div class=" w-[800px]">
                <div class=" text-lg	 mb-4">备注信息</div>
                
                <div class="pl-3  grid grid-cols-1 ">
                    <div>
                        <el-form-item label="备注" prop="remark" class="w-full">
                            <el-input class="w-11/12" type="textarea" v-model="formData.remark"
                                      placeholder="请输入备注描述"
                                      clearable/>
                        </el-form-item>
                    </div>
                
                </div>
            
            </div>
        </el-card>
    
    </el-form>
    
    <footer-btns>
        <el-button type="primary" @click="handleSubmit">创建</el-button>
    </footer-btns>

</template>

<script lang='ts' setup>


import {ShallowRef, UnwrapNestedRefs} from "@vue/reactivity";
import {onMounted, shallowRef} from "vue";
import {FormInstance} from "element-plus";
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import useMultipleTabsManager from "@/manager/base/MultipleTabsManager";
import {useRoute} from "vue-router";
import CrmLogisticsAdminRequest from "@/api/logistics/request/CrmLogisticsAdminRequest";
import {getCorporationList} from "@/api/logistics/CrmCorporationController";
import CrmCorporationDTO from "@/api/logistics/dto/CrmCorporationDTO";
import {createLogisticsAdmin} from "@/api/logistics/CrmLogisticsAdminController";
import RouterManager from "@/manager/base/RouterManager";
import router from "@/base/router";
import {childrenSituationList, isGifList} from "@/config/enums/crm/comment";


let afterSaleOrderConfig = useAfterSaleEnumManager();
let multipleTabsManager = useMultipleTabsManager();
const formRef: ShallowRef = shallowRef<FormInstance>()


let formData: UnwrapNestedRefs<CrmLogisticsAdminRequest> = reactive(new CrmLogisticsAdminRequest());

function handleSubmit() {
    formRef.value?.validate().then(() => {
            createLogisticsAdmin(formData).then(() => {
                multipleTabsManager.removeTab()
                let routePathByName = RouterManager.getRoutePathByName("logistics/client/clientList/index");
                if (!!routePathByName) {
                    router.push(routePathByName)
                }
            })
        }
    )
}


function handleAddressChange(value: string[]) {
    formData.addressInfoEnum = value
    formData.addressInfo.economize = value[0]
    formData.addressInfo.city = value[1]
    formData.addressInfo.county = value[2]
}

/**
 * 编辑当前行
 *
 * @param row
 */
function editCurrentLine(row: any) {
    row.isDisabled = !row.isDisabled;
}


const corporationList = ref<CrmCorporationDTO[]>([]);
onMounted(async () => {
    corporationList.value = await getCorporationList();
})


let route = useRoute();
let watchEffect1 = watchEffect(() => {
    formData.id = route.query?.id as any
});
watchEffect1()

</script>





